<template>
  <div class="addCoupon_container">
    <a-card style="width: 100%">
      <a-form-model :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item label="优惠券类型">
          <a-select v-model="form.region" placeholder="全场赠券">
            <a-select-option value="全场赠券">
              全场赠券
            </a-select-option>
            <a-select-option value="会员赠券">
              会员赠券
            </a-select-option>
            <a-select-option value="购物赠券">
              购物赠券
            </a-select-option>
            <a-select-option value="注册赠券">
              注册赠券
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item ref="name" label="优惠券名称" prop="name">
          <a-input
            v-model="form.name"
            @blur="
              () => {
                $refs.name.onFieldBlur();
              }
            "
          />
        </a-form-model-item>
        <a-form-model-item label="使用平台">
          <a-select v-model="form.region" placeholder="全平台">
            <a-select-option value="全平台">
              全平台
            </a-select-option>
            <a-select-option value="移动平台">
              移动平台
            </a-select-option>
            <a-select-option value="PC平台">
              PC平台
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item ref="num" label="总发行量" prop="num">
          <a-input
            v-model="form.num"
            @blur="
              () => {
                $refs.num.onFieldBlur();
              }
            "
          />
        </a-form-model-item>
        <a-form-model-item ref="money" label="面额" prop="money">
          <a-input
            v-model="form.money"
            suffix="元"
          />
        </a-form-model-item>
        <a-form-model-item label="每人限领">
          <a-input
            v-model="form.couponNum"
            suffix="张"
          />
        </a-form-model-item>
        <a-form-model-item label="使用门槛">
          <a-input
            v-model="form.couponNum"
            suffix="元可用"
            prefix="满"
          />
        </a-form-model-item>
        <a-form-model-item label="领取日期">
          <a-date-picker
            v-model="form.date1"
            show-time
            type="date"
            placeholder="请选择时间"
            style="width: 100%;"
          />
        </a-form-model-item>
        <a-form-item label="有效期">
          <a-range-picker @change="onChangeDate" />
        </a-form-item>
        <a-form-item label="可使用商品" :wrapper-col="{ span: 12 }">
          <a-radio-group v-decorator="['radio-button']">
            <a-radio-button value="全场通用">
              全场通用
            </a-radio-button>
            <a-radio-button value="指定分类">
              指定分类
            </a-radio-button>
            <a-radio-button value="指定商品">
              指定商品
            </a-radio-button>
          </a-radio-group>
        </a-form-item>
        <a-form-model-item label="备注">
          <a-input v-model="form.desc" type="textarea" />
        </a-form-model-item>
        <a-form-model-item :wrapper-col="{ span: 14, offset:6 }">
          <a-button type="primary" @click="onSubmit">
            确认
          </a-button>
          <a-button style="margin-left: 10px;" @click="$router.back()">
            取消
          </a-button>
        </a-form-model-item>
      </a-form-model>
    </a-card>
  </div>
</template>

<script>
export default {
  data() {
    const validateNum = (rule, value, callback) => {
      if (value instanceof Number !== false) {
        callback(new Error('请输入数字'))
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass')
        }
        callback()
      }
    }
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 10 },
      form: {
        name: '',
        region: undefined,
        date1: undefined,
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入优惠券名称', trigger: 'blur' },
          { min: 3, max: 10, message: '优惠券名称长度在3-10个字之间', trigger: 'blur' }
        ],
        num: [
          { required: true, message: '请输入优惠券发行量', trigger: 'blur' },
          { validator: validateNum, trigger: 'blur' }
        ],
        money: [
          { required: true, message: '请输入面额', trigger: 'blur' },
          { min: 1, max: 2, message: '面额为两位数字', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    onSubmit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm() {
      this.$refs.ruleForm.resetFields()
    },
    onChangeDate(date, dateString) {
      console.log(date, dateString)
    }
  }
}
</script>

<style lang="scss">
.addCoupon_container {
  padding: 20px 400px 20px 300px;
}
</style>
